<template>
  <VPage class="app-container">
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <multiInput class="w-50" v-model="form.tracking_number" placeholder="快递单号"></multiInput>
        <multiInput class="w-50" v-model="form.receipt_number" placeholder="采购单号"></multiInput>
        <SelectWarehouse class="selectClass" v-model="form.warehouse_id" placeholder="仓库" :multiple="true">
        </SelectWarehouse>
        <el-select class="selectClass w-30" v-model="form.process_status" placeholder="状态" clearable>
          <el-option v-for="item in options['stockin.processOrder']?.[0].orderProcessStatus" :key="item.value"
            :label="item.label" :value="item.value"></el-option>
        </el-select>
        <VGroup>
          <el-select class="selectClass" v-model="form.timeRange.type" style="max-width: 120px">
            <el-option v-for="item in timeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-date-picker v-model="form.timeRange.value" type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime()"
            style="max-width: 300px" />
        </VGroup>
        <VGroup>
          <el-select class="selectClass" v-model="form.skuRange.type" style="max-width: 150px">
            <el-option v-for="item in skuOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-input v-if="form.skuRange.type == 'sku'" class="w-50" ref="inputRef" v-model="form.skuRange.value"
            placeholder="SKU/自定义SKU" @focus="getInputFocus($event)" @keyup.enter.native="searchForm"></el-input>
          <multiInput v-else-if="form.skuRange.type == 'sku_list'" class="w-50" v-model="form.skuRange.value"
            placeholder="SKU/自定义SKU"></multiInput>
        </VGroup>
      </template>
      <template #toolbar_btns>
        <el-button @click="handleExport()"><svg-icon icon-class="import" />导出</el-button>
      </template>
    </VTable>
    <ComModal ref="ComModalRef" :options="options" @query="query" @focus="focusInput"></ComModal>
    <DerivedCenter ref="DerivedCenterRef"></DerivedCenter>
  </VPage>
</template>
<script setup name="StorageProcess-order" lang="jsx">
import { ElMessage } from 'element-plus'
import { ref, reactive, toRefs, onMounted, nextTick } from 'vue'
import { getEnums } from '@/api/public'
import { queryListOrder } from './api'
import ComModal from './components/ComModal.vue'
import multiInput from '@/components/multiInput';
import SelectWarehouse from '@/components/SelectWarehouse'
import DerivedCenter from '@/components/DerivedCenter'

const timeOption = [
  { label: "下单时间", value: "sign_time" },
  { label: "创建时间", value: "create_time" },
  { label: "完成时间", value: "complete_time" },
]

const skuOption = [
  {
    label: "SKU", value: "sku"
  },
  {
    label: "SKU批量", value: "sku_list"
  }
]

const tableRef = ref()
const tableOptins = reactive({
  rowConfig: { height: 'auto' },
  // showHeaderOverflow: false,
  // showOverflow: false,
  formConfig: {
    data: {
      skuRange: { type: 'sku', value: [], range: false },
      timeRange: { type: 'create_time', value: [], range: true },
    }
  },
  columns: [
    {
      type: "seq", title: '序号', width: 80
    },
    {
      field: 'process_order_no', title: '单号', width: 200, slots: {
        default: ({ row }) => {
          return <div class="base-text-color cursor-pointer" onClick={() => showOrderDetail(row.id)}> {row.process_order_no} </div>
        }
      }
    },
    {
      field: 'express_json', title: '快递单号', width: 180
    },
    {
      field: 'receipt_number', title: '采购单号', width: 200
    },
    {
      field: 'process_status_cn', title: '状态', width: 120
    },
    {
      field: 'order_time', title: '下单时间', width: 180
    },
    {
      field: 'platform_order_no', title: '平台单号', width: 180
    },
    {
      field: 'business_type_cn', title: '收货类型', width: 120
    },
    {
      field: 'warehouse_name', title: '收货仓', width: 120
    },
    {
      field: 'country', title: '国家', width: 120
    },
    {
      field: 'create_time', title: '创建时间', width: 180
    },
    {
      field: 'order_remark', title: '下单备注', width: 120
    },
    {
      field: 'process_user', title: '加工人', width: 160
    },
    {
      field: 'process_time', title: '加工时间', width: 160
    }
  ],
  proxyConfig: {
    seq: true,
    props: {
      result: 'data',
      total: 'total',
    },
    ajax: {
      query: async ({ page, form }) => {
        console.log(form)
        const res = await queryListOrder({ ...form, ...page })
        if (form.sku && res.data.length == 1) {
          showOrderDetail(res.data[0].id)
        }
        return new Promise(function (resolve) {
          resolve({
            data: res.data,
            total: res.total
          })
        })
      }
    }
  }
})
const query = () => {
  tableRef.value.query()
}

const data = reactive({
  options: [],
  wareDataList: [],
})
const { options, wareDataList } = toRefs(data)

// 获取枚举类
const fetchOption = async () => {
  getEnums({
    version: "v1", "name": [
      "stockin.processOrder"
    ]
  }).then(res => {
    options.value = res.data
  })
}
// provide('options', options)
fetchOption()

const DerivedCenterRef = ref()
const handleExport = (val) => {
  let condition = tableRef.value.getQueryForm()
  DerivedCenterRef.value.open({
    id: 57,
    tag_name: 'wms',
    condition
  })
}
// 加工单详情
const ComModalRef = ref()

const showOrderDetail = (id) => {
  ComModalRef.value.open(id)
}

const inputRef = ref()
onMounted(() => {
  nextTick(() => {
    inputRef.value.focus()
  })
})

const getInputFocus = (event) => {
  event.currentTarget.select();
}

const searchForm = (event) => {
  query()
}

const focusInput = () => {
  if(inputRef.value){
    inputRef.value.focus()
  }

}
</script>
<style scoped>
:deep(.select-trigger){
  position: relative;
}
</style>